<template>
    <div>
        <div class="btns" style="margin: 10px 0;">
            <el-button color="#CB172E" type="primary" :icon="Promotion">返回根</el-button>
            <el-button color="#CB172E" type="primary" :icon="Search">搜素</el-button>
            <el-button color="#CB172E" type="primary" :icon="Plus">添加</el-button>
            <el-button color="#CB172E" type="primary" :icon="CloseBold">删除</el-button>
            <el-button color="#CB172E" type="primary" :icon="Select">启用</el-button>
            <el-button color="#CB172E" type="primary" :icon="CircleCloseFilled">禁用</el-button>
        </div>
        <!-- 表格 -->
        <el-table ref="multipleTableRef" :data="accountList" row-key="id" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection"  width="55" />
            <el-table-column property="id" label="编号" width="80"/>
            <el-table-column property="title" label="标题" />
            <el-table-column property="group" label="分组"  />
            <el-table-column property="local" label="控制地址" width="150" />
            <el-table-column property="prevMenu" label="上级菜单" width="150" />
            <el-table-column property="sort" label="排序"  />
            <el-table-column label="状态">
                <template #default="scope">
                    <el-icon v-show="scope.row.status" color="red"><Select /></el-icon>
                    <el-icon v-show="!scope.row.status"><CloseBold /></el-icon>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="300">
                <template #default="scope">
                    <el-button size="small" :icon="EditPen">编辑</el-button>
                    <el-button size="small" :icon="CircleCloseFilled">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import dayjs from "dayjs"
import { Search, Plus, CloseBold, Select, CircleCloseFilled,EditPen,Promotion } from '@element-plus/icons-vue'
import { ref } from 'vue';
const multipleSelection = ref([])
const accountList = ref([
    { id: 1, title: "系统管理", group: "系统管理", local: "System/menu", prevMenu: "根菜单", sort: 2, status: true },
    { id: 2, title: "首页管理", group: "首页管理", local: "System/menu", prevMenu: "根菜单", sort: 1, status: true },
    { id: 3, title: "首页管理", group: "首页管理", local: "System/menu", prevMenu: "根菜单", sort: 4, status: false },
    { id: 4, title: "首页管理", group: "首页管理", local: "System/menu", prevMenu: "根菜单", sort: 7, status: false },
    { id: 5, title: "首页管理", group: "首页管理", local: "System/menu", prevMenu: "根菜单", sort: 6, status: true },
    { id: 6, title: "首页管理", group: "首页管理", local: "System/menu", prevMenu: "根菜单", sort: 5, status: true },
    { id: 7, title: "首页管理", group: "首页管理", local: "System/menu", prevMenu: "根菜单", sort: 9, status: true },
])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
</script>
<style lang="scss" scoped></style>